<template>
  <d2-container>
    <div class="mt-3 ml-2">
      <el-form :model="form" label-width="120px">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="站点信息" name="first">
            <div style="width: 50%;">
              <el-form-item label="站点名称">
                <el-input v-model="form.web_name"></el-input>
              </el-form-item>
            </div>
            <div style="width: 60%;">
              <el-form-item label="站点SEO名称">
                <el-input v-model="form.seo_webname" placeholder="站点SEO名称"></el-input>
              </el-form-item>
            </div>
            <div style="width: 60%;">
              <el-form-item label="关键词">
                <el-input v-model="form.keywords" placeholder="站点SEO关键词"></el-input>
              </el-form-item>
            </div>
            <div style="width: 50%;">
              <el-form-item label="站点描述">
                <el-input type="textarea" v-model="form.description" placeholder="站点SEO描述"></el-input>
              </el-form-item>
            </div>
            <div style="width: 30%;">
              <el-form-item label="服务电话">
                <el-input v-model="form.service_phone"></el-input>
              </el-form-item>
            </div>
            <el-form-item label="图片" prop="cover_image">
              <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleSuccess" :headers="headersobj">
                <img v-if="form.Web_logo" :src="form.Web_logo" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="图片" prop="cover_image">
              <el-upload class="avatar-uploader" :action="actionUrl" :show-file-list="false" :on-success="handleappImageSuccess" :headers="headersobj">
                <img v-if="form.app_image" :src="form.app_image" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <div style="width: 40%;">
              <el-form-item label="ICP">
                <el-input v-model="form.ICPnumber"></el-input>
              </el-form-item>
            </div>
            <div style="width: 40%;">
              <el-form-item label="公安备案">
                <el-input v-model="form.beian_gov"></el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="用户服务协议" name="agreement">
            <div style="width: 80%;height: 500px;">
              <el-form-item prop="user_agreement">
                <d2-quill v-model="form.user_agreement" />
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="隐私声明" name="statement">
            <div style="width: 80%;height: 500px;">
              <el-form-item prop="privacy_statement">
                <d2-quill v-model="form.privacy_statement" />
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="青少年保护规则" name="protection">
            <div style="width: 80%;height: 500px;">
              <el-form-item prop="information_protection">
                <d2-quill v-model="form.information_protection" />
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="商家入驻协议" name="entry">
            <div style="width: 80%;height: 500px;">
              <el-form-item prop="entry_agreement">
                <d2-quill v-model="form.entry_agreement" />
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="小说作者入驻协议" name="novel">
            <div style="width: 80%;height: 500px;">
              <el-form-item prop="novel_agreement">
                <d2-quill v-model="form.novel_agreement" />
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="解题作者入驻协议" name="answer">
            <div style="width: 80%;height: 500px;">
              <el-form-item prop="answer_agreement">
                <d2-quill v-model="form.answer_agreement" />
              </el-form-item>
            </div>
          </el-tab-pane>
          <div style="margin-top: 135px;">
            <el-form-item>
              <el-button type="primary" @click="submitForm">保存</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </div>
        </el-tabs>
      </el-form>
    </div>
  </d2-container>
</template>
<script>
  import {
    websiteCeateUrl,
    websiteUpdateUrl,
    websitesListUrl,
    websitesDetailUrl,
    imagesUploadUrl
  } from '@/utils/interface'
  import {
    baseURL
  } from '@/utils/request'
  import d2Quill from '@/components/d2-quill'
  import util from '@/libs/util'
  export default {
    components: {
      d2Quill
    },
    data() {
      return {
        form: {
          web_name: '',
          seo_webname: '',
          keywords: '',
          description: '',
          service_phone: '',
          Web_logo: '',
          app_image: '',
          ICPnumber: '',
          beian_gov: '',
          user_agreement: '',
          privacy_statement: '',
          information_protection: '',
          entry_agreement: '',
          novel_agreement:'',
          answer_agreement:''
        },
        actionUrl: baseURL + imagesUploadUrl,
        activeName: 'first',
        websitesList: [],
        websiteId: '',
        headersobj:''
      }
    },
    mounted() {
      this.getWebsiteList()
      this.headersobj = {
        Authorization: 'Bearer ' + util.cookies.get('token')
      }
    },
    methods: {
      getWebsiteList() {
        this.$get(websitesListUrl).then(res => {
          console.log(res.data.data.list);
          this.websitesList = res.data.data.list
          this.websiteId = this.websitesList[0].id
          this.getWebsitesDetail()
        })
      },
      getWebsitesDetail() {
        if (this.websitesList.length !== 0) {
          this.$get(websitesDetailUrl + this.websiteId + '/')
            .then(res => {
              this.form = {
                web_name: res.data.data.web_name,
                seo_webname: res.data.data.seo_webname,
                keywords: res.data.data.keywords,
                description: res.data.data.description,
                service_phone: res.data.data.service_phone,
                Web_logo: res.data.data.Web_logo,
                app_image: res.data.data.app_image,
                ICPnumber: res.data.data.ICPnumber,
                beian_gov: res.data.data.beian_gov,
                user_agreement: res.data.data.user_agreement,
                privacy_statement: res.data.data.privacy_statement,
                information_protection: res.data.data.information_protection,
                entry_agreement: res.data.data.entry_agreement,
                novel_agreement: res.data.data.novel_agreement,
                answer_agreement: res.data.data.answer_agreement
              }
              console.log('获取站点信息', res);
            })
            .catch(error => {
              console.log(error)
            })
        } else {
          return
        }
      },
      handleSuccess(val) {
        this.form.Web_logo = val.data.url
      },
      handleappImageSuccess(val){
        this.form.app_image = val.data.url
      },
      submitForm() {
        if (this.websitesList.length == 0) {
          this.$post(websiteCeateUrl, this.form)
            .then(res => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.getWebsitesDetail()
              this.getWebsiteList()
            })
            .catch(error => {
              console.log(error)
            })
        } else {
          this.$put(websiteUpdateUrl + this.websiteId + '/', this.form)
            .then(res => {
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.getWebsitesDetail()
            })
            .catch(error => {
              console.log(error)
            })
        }
      },
      resetForm() {
        this.loadData()
      },
      handleClick() {

      }
    }
  }
</script>
<style>
  .ql-container {
    height: 500px;
  }
</style>
